<template>
	<view class="inivte-box">
		<view class="inivte-center">
			<view class="text-back" @click="bachMe">
				<i style="color: #FFFFFF;" class="cuIcon-back"></i>
			</view>
			<view class="inivte-header">
				<view class="code">
					邀请码: 25840
				</view>
			</view>
			<view class="h68" style="background-color: #88DDF2;">
				
			</view>
			<view class="share-box">
				<view class="share-center flex justify-center">
					<view class="title text-center lh84">
						立即分享
					</view>
				</view>
				<view class="radio-box  flex justify-around">
					<view class="w98 text-center" @click="shear('weix')">
						<image src="../../static/img/wx.png" class="w56 h56" mode=""></image>
						<view class="w98 f24">
							微信
						</view>
					</view>
					<view class="w98 text-center" @click="shear('weixq')">
						<image src="../../static/img/py.png" class="w56 h56" mode=""></image>
						<view class=" f24">
							朋友圈
						</view>
					</view>
					<!-- <view class="w98 text-center" @click="shear('qq')">
						<image src="../../static/img/qq.png" class="w56 h56" mode=""></image>
						<view class=" f24">
							QQ
						</view>
					</view>
					<view class="w98 text-center">
						<image src="../../static/img/kj.png" class="w56 h56" mode=""></image>
						<view class=" f24">
							QQ空间
						</view>
					</view> -->
					<view class="w98 text-center" @click="shear('phone')">
						<image src="../../static/img/setphone.png" class="w56 h56" mode=""></image>
						<view class=" f24">
							保存图片
						</view>
					</view>

				</view>

				<view class="share-center flex justify-center mt105">
					<view class="title text-center lh84">
						邀请记录
					</view>
				</view>
				<view class="inv-code">
					<view class="h80 mt32 u-border-bottom">

						<u-tabs font-size="28" height="85" active-color="#40C6A8" inactive-color="#666666"
							bar-width="102" :list="list" :is-scroll="false" :current="current" @change="change">
						</u-tabs>
					</view>
					<view v-if="current == 0" class="pt16 pb16 pl30 f26 r6 ww90" style="color:#FF5D00 ;
						margin: 30rpx auto;
						background-color: #FFECE1;">
						今日奖励金13星币，总奖励金230星币
					</view>

					<view v-if="current == 1" class="pt16 pb16 pl30 f26 r6 ww90" style="color:#FF5D00 ;
						margin: 30rpx auto;
						background-color: #FFECE1;">
						今日奖励人数3人，总邀请人数10人
					</view>
					<view class="scroll-box1" v-if="current == 0 || current == 1">
						<scroll-view v-if="current == 0" :scroll-top="100" scroll-y="true" class="scroll-Y"
							@scrolltolower="onrendButtom" lower-threshold="100" style="height: 386rpx;">
							<view class="flex align-center justify-between mb30" v-for="(item, index) in 10" :key="index">
								<view class="flex align-center">
									<image src="../../static/img.jpg" class="w50 h50 r25" mode=""></image>
									<text class="ml25 f28">捕捉一只大花喵~</text>
								</view>
								<view class="">
									+1.00
								</view>
							</view>
						</scroll-view>

						<scroll-view v-if="current == 1" :scroll-top="100" scroll-y="true" class="scroll-Y"
							@scrolltolower="onrendButtom" lower-threshold="100" style="height: 386rpx;">
							<view class="flex align-center justify-between mb30" v-for="(item, index) in 10" :key="index">
								<view class="flex align-center">
									<image src="../../static/img.jpg" class="w50 h50 r25" mode=""></image>
									<text class="ml25 f28">捕捉一只大花喵~</text>
								</view>
							</view>
						</scroll-view>
					</view>

					<view class="proxy-box text-center pt43 pb15" v-if="current == 2">
						<view class="btn" v-for="(item, index) in listText" :key="index" @click="textTab(index)"
							:class="bgc == index ? 'bgc-text': ''">
							{{item.name}}
						</view>
					</view>
				</view>


				<view class="rebate-box text-center">
					<view class=" pad" style="background-color: #26B695;">
						<view class="pt27 f32">
							返利介绍
							<view class="title-box">

							</view>
						</view>

						<view class="lh60">
							<view class="">
								* 一级代理需邀请500人，返利占消费的25%
							</view>
							<view class="">
								* 二级代理需邀请300人，返利占消费的20%
							</view>
							<view class="">
								* 三级代理需邀请100人，返利占消费的15%
							</view>
						</view>
					</view>
				</view>


			</view>
			<view class="text-center bom">
				本活动最终解释权归小猪交友所有
			</view>
		</view>
		<poster ref="poster" @closePost="closePost" v-if="setCode"></poster>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	// uni_modules引入方式
	import poster from '../../components/zywPosterSmall.vue';

	export default {
		components: {
			poster
		},
		data() {
			return {
				list: [{
					name: '收益明细'
				}, {
					name: '邀请人数'
				}, {
					name: '代理级别',
				}],
				current: 2,
				listText: [{
					name: '一级代理'
				}, {
					name: '二级代理'
				}, {
					name: '三级代理'
				}],
				bgc: 0,
				setCode: false,
				provider: '',
				scene: '',
				is_show_model: false, //是否显示分享模态窗
			};
		},
		onShow() {},
		onLoad(e) {},
		methods: {
			saveImage() {
				this.isShowPopup = false
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			change(index) {
				this.current = index
			},
			//分享海报
			// sharePoster() {
			// 	//获取带参数二维码并传递
			// 	this.is_show_model = false
			// 	this.$refs.poster.showCanvas()
			// },
			show() {

				let postData = {
					content: '动态参数,URL等,URL需使用https并添加download域名,预览未添加域名需要打开调试者模式'
				};
				uni.showLoading({
					title: '绘制ing...',
					mask: true
				});
				this.setCode = true;
				var that = this
				setTimeout(() => {
					console.log(that.$refs.poster);
					that.$refs.poster.drawPoster(postData); //在组件内drawPoster()函数编写需要绘制的内容
				}, 10);
			},
			closePost() {
				this.setCode = false;
			},

			// 触底了
			onrendButtom() {
				console.log('触底了111==>', 111);
			},

			textTab(index) {
				this.bgc = index
			},
			
			bachMe() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			shear(text) {
				switch(text) {
				     case 'weix':
					 this.scene = 'WXSceneSession'
				     this.weixinShear()
				        break;
				     case 'weixq':
					  this.scene = 'WXSenceTimeline'
				        this.weixinShear()
				        break;
						case 'phone':
						   this.show()
						   break;
				     default:
				         this.weixinShear()
				} 
			},
			
			weixinShear() {
				/* uni.share({
				    provider: this.provider ? this.provider : 'weixin',
				    scene:  this.scene ? this.scene : 'WXSceneSession',
				    type: 1,
					title: "uni-app分享",
					href: "http://uniapp.dcloud.io/",
				    // summary: "www.baidu.com",
				    summary: "465452",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				}); */
				
				uni.share({
				   provider: this.provider ? this.provider : 'weixin',
				   scene:  this.scene ? this.scene : 'WXSceneSession',
				    type: 0,
				    href: "http://uniapp.dcloud.io/",
				    title: "小猪交友",
				    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				    imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			}

		}
	};
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #88DDF2;
	}

	.inivte-box {

		.inivte-center {
			
			.text-back {
				position: fixed;
				top: 60rpx;
				left: 30rpx;
				z-index: 10000;
				font-size: 38rpx;
			}

			.inivte-header {
				width: 100%;
				height: 984rpx;
				background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/codeInv.png) no-repeat;
				background-size: 100%;
				position: relative;

				.code {
					position: absolute;
					top: 933rpx;
					left: 50%;
					color: #FFFFFF;
					font-size: 28rpx;
					transform: translateX(-50%);
				}
			}

			.share-box {
				padding: 40rpx;
				width: 100%;
				height: 100%;
				background-color: #88DDF2;

				.share-center {
					border-radius: 20rpx 20rpx 0 0;
					background-color: #FFFFFF;


					.title {
						width: 516rpx;
						height: 84rpx;
						font-size: 32rpx;
						color: #FFFFFF;
						margin-top: -30rpx;
						background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/titl.png) no-repeat;
						background-size: 100%;
					}
				}

				.radio-box {
					padding-top: 38rpx;
					margin-top: -2rpx;
					padding-bottom: 39rpx;
					border-radius: 0 0 20rpx 20rpx;
					background-color: #FFFFFF;
				}

				.inv-code {
					height: 600rpx;
					margin-top: -34rpx;
					background-color: #FFFFFF;
					border-radius: 0 0 20rpx 20rpx;

					.a {
						width: 204rpx;
					}

					.style {
						font-weight: 600;
						border-bottom: 1rpx solid #000000;
					}

					.scroll-box1 {
						padding: 0 35rpx;
						border-radius: 0 0 20rpx 20rpx;
						position: relative;
					}

					.scroll-box1::after {
						position: absolute;
						width: 100%;
						height: 63rpx;
						left: 0;
						bottom: -2rpx;
						content: '';
						border-radius: 0 0 20rpx 20rpx;
						background-color: #FFFFFF;
						opacity: 0.8;
					}

					.proxy-box {
						width: 100%;

						.btn {
							width: 329rpx;
							height: 120rpx;
							color: #FFFFFF;
							line-height: 120rpx;
							font-size: 32rpx;
							margin: 0 auto 30rpx;
							border-radius: 14rpx;
							background-color: #CCCCCC;
						}

						.bgc-text {
							color: #945E01;
							background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/cc.png) no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.rebate-box {
					margin-top: 52rpx;
					height: 320rpx;
					border-radius: 30rpx;
					color: #FFFFFF;
					font-size: 26rpx;
					border: 14rpx solid #1AAD8C;

					.title-box {
						width: 158rpx;
						height: 12rpx;
						background: #11A281;
						border-radius: 50%;
						margin: -8rpx auto 27rpx;
					}

					.pad {
						width: 101%;
						height: 101%;
						border-radius: 18rpx;
					}
				}
			}
		}

		.bom {
			width: 100%;
			height: 60rpx;
			color: #FFFFFF;
			line-height: 60rpx;
			background-color: #000000;
			opacity: 0.5;
			font-size: 24rpx;
		}

		.setphone {
			width: 600rpx;
			height: 940rpx;
			background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/code.png) no-repeat;
			background-size: 100% 100%;
		}

		.bgc-add {
			font-size: 30rpx;
			padding: 60rpx 0;
			color: #FFFFFF;
		}

		/deep/.u-mode-center-box[data-v-ece9ae1c] {
			background-color: transparent;
		}
	}
</style>
